<template>
  <div class="editPassword">
    <PageTitle title="修改密码"></PageTitle>
    <van-form @submit="onEdit" class="wrap">
      <van-field
        v-model="loginUser.phone"
        name="phone"
        label="手机号"
        placeholder="请输入手机号"
        disabled
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        maxlength="16"
        clearable
        :rules="[
          { required: true, message: '密码不能为空' },
          { validator: validatePwd, message: '请输入6-16位密码' },
        ]"
      />
      <van-field
        v-model="confirmPwd"
        type="password"
        name="confirmPwd"
        label="确认密码"
        placeholder="请再次输入密码"
        maxlength="16"
        clearable
        :rules="[
          { required: true, message: '密码不能为空' },
          { validator: comparePwd, message: '两次输入密码不相同' },
          { validator: validatePwd, message: '请输入6-16位密码' },
        ]"
      />
      <van-field
        v-model="sms"
        center
        name="captcha"
        label="验证码"
        placeholder="请输入短信验证码"
        clearable
        :rules="[{ required: true, message: '验证码不能为空' }]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            round
            color="#25c9c3"
            @click.prevent="getSms('reset')"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div class="btn">
        <van-button round block type="info" native-type="submit" color="#25c9c3"
          >确定修改</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "EditPassword",
  data() {
    return {
      password: "",
      confirmPwd: "",
      sms: "",
      smskey: null,
    };
  },
  components: {
    PageTitle,
  },
  computed: {
    ...mapGetters(["loginUser"]),
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    comparePwd(val) {
      return val == this.password;
    },
    validatePwd(val) {
      return val.length >= 6 && val.length <= 16;
    },
    getSmsKey() {
      this.changeLoading(true);
      this.$axios.get("/api/verify_code").then((d) => {
        console.log("verify_code", d.data);
        this.smskey = d.data.data.key;
        this.changeLoading(false);
      });
    },
    getSms(type) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "发送中...",
      });
      this.$axios
        .post("/api/register/verify", {
          key: this.smskey,
          phone: this.loginUser.phone,
          type,
        })
        .then((d) => {
          console.log("verify", type, d.data);
          this.$toast.clear();
          if (d.data.status == 200) {
            this.$toast.success("验证码发送成功");
          } else {
            this.$toast.fail(d.data.msg.replace("！", ""));
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("请求失败");
        });
    },
    onEdit(val) {
      console.log("edit", val);
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "修改中...",
      });
      this.axios
        .post("/api/register/reset", {
          account: this.loginUser.phone,
          captcha: this.sms,
          password: this.password,
        })
        .then((d) => {
          console.log("reset", d.data);
          this.$toast.clear();
          if (d.data.status == 200) {
            this.$toast.success({
              message: "修改成功",
              forbidClick: true,
              onClose: () => {
                if (window.history.length <= 1) {
                  this.$router.push("/");
                } else {
                  this.$router.go(-1);
                }
              },
            });
          } else {
            this.$toast.fail(d.data.msg);
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("请求失败");
        });
    },
  },
  created() {
    this.getSmsKey();
  },
};
</script>

<style lang="less" scoped>
.van-form {
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
  padding-top: 25px;
  .btn {
    margin: 25px 16px;
  }
}
</style>